import React from 'react';
import { Popover, Avatar, Button, Flex } from 'antd';
import { SunOutlined, MoonOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux';
import { setUser } from '../store/userSlice';
import type { RootState } from '../types/theme';
import { themes } from '../utils/publicCss';

const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';
const content = (
  <div>
    <p>Content</p>
    <p>Content</p>
  </div>
);
const HeaderWidget: React.FC = () => {
  const user = useSelector((state: RootState) => state.user.theme);
  const dispatch = useDispatch();

  const [isDark, setIsDark] = React.useState(false);
  const handleSwitchThemes = () => {
    setIsDark(!isDark);
    const themeText = isDark ? 'light' : 'dark';
    dispatch(setUser(themeText));
  };

  return (
    <div>
      <Flex justify="end">
        <Button color="primary" variant="text" onClick={handleSwitchThemes}>
          {!isDark && <SunOutlined />}
          {isDark && <MoonOutlined />}
          <span>{user}</span>
        </Button>
        <Popover
          placement="bottomRight"
          content={content}
          title="Title"
          trigger="hover"
          style={{ background: themes[user].background }}
        >
          <Avatar src={url} />
        </Popover>
      </Flex>
    </div>
  );
};

export default HeaderWidget;
